<template>
    <div class="pagination-content">
        <!-- 浦银风格 -->
        <template v-if="pageType === 'pyaxa'">
            <el-pagination
                :page-sizes="[5, 10, 20, 25, 50, 100, 300, 500]"
                @size-change="handleSizeChange"
                layout="total,sizes,slot, prev"
                :total="paging.total"
                :page-size="paging.pageSize"
                :current-page.sync="paging.currentPage"
                @current-change="currentChange"
            >
                <i
                    class="el-icon-d-arrow-left"
                    @click="toPage('first')"
                    :class="{
                        prob: paging.total < 1 || paging.currentPage == 1,
                        allowed: !(paging.currentPage == 1) && paging.total > 0,
                    }"
                ></i>
            </el-pagination>
            <span style="cursor: default; color: black"
                >{{ paging.total > 0 ? paging.currentPage : 0 }}/{{ Math.ceil(paging.total / paging.pageSize) }}</span
            >
            <el-pagination
                layout="next,slot"
                :total="paging.total"
                :page-size="paging.pageSize"
                :current-page.sync="paging.currentPage"
                @current-change="currentChange"
            >
                <i
                    class="el-icon-d-arrow-right"
                    @click="toPage('last')"
                    :class="{
                        prob: paging.total < 1 || paging.currentPage == Math.ceil(paging.total / paging.pageSize),
                        allowed: !(paging.currentPage == Math.ceil(paging.total / paging.pageSize)) && paging.total > 0,
                    }"
                ></i>
            </el-pagination>
        </template>

        <!-- 产品风格 完整功能 -->
        <el-pagination
            v-else
            @size-change="handleSizeChange"
            @current-change="currentChange"
            :current-page.sync="paging.currentPage"
            :page-sizes="[5, 10, 20, 25, 50, 100, 300, 500]"
            :page-size="paging.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paging.total"
            background
        >
        </el-pagination>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({ name: 'RiskPagination', components: {} })
export default class RiskPagination extends Vue {
    @Prop()
    paging;
    @Prop() pageType; // 控制分页样式类型 浦银|产品

    // 分页变化
    async currentChange(value) {
        this.paging.currentPage = value;
        this.$emit('page-change');
    }

    // 切换页码
    async handleSizeChange(value) {
        this.paging.pageSize = value;
        this.paging.currentPage = 1;
        this.$emit('page-change');
        this.$emit('pagesize-change');
    }

    // 首页/尾页
    async toPage(type, moduleCode) {
        if (
            this.paging.total < 1 ||
            (this.paging.currentPage == Math.ceil(this.paging.total / this.paging.pageSize) && type == 'last') ||
            (this.paging.currentPage == 1 && type == 'first')
        ) {
            return;
        }
        let page = 1;
        if (type == 'last') {
            page = Math.ceil(this.paging.total / this.paging.pageSize);
        }
        this.currentChange(page);
    }
}
</script>
<style lang="scss" scoped>
.pagination-content {
    text-align: right;
    line-height: 28px;
    margin-right: 10px;
    /deep/ .el-pagination {
        padding-left: 0px !important;
        padding-right: 0px !important;
        display: inline-block;
        .el-select .el-input .el-input__inner {
            background: transparent;
            border: 1px solid #e5e5ea;
        }

        i {
            font-weight: 800;
        }
        button:disabled {
            background-color: transparent !important ;
        }
        // /deep/ .el-input .el-input--mini .el-input--suffix .el-input__icon {
        //     color: red !important;
        //     line-height: 25px !important;
        // }
    }
    .prob {
        color: #ccc;
        cursor: not-allowed;
    }
    .allowed {
        color: #272c36;
        cursor: pointer;
        &:hover {
            color: #409eff;
        }
    }
}
</style>
